<template>
  <div class="page">
    <!-- 搜索区域 开始 -->
    <div class="el_card_box">
      <el-form
        :inline="true"
        size="small"
        :model="formInline"
        class="search_form"
      >
        <el-form-item label="广告位置：">
          <el-select v-model="formInline.position" filterable>
            <el-option label="web网站首页" value="1"></el-option>
            <el-option label="h5首页" value="2"></el-option>
            <el-option label="小程序首页" value="3"></el-option>
            <el-option label="web网站banner" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否上架：">
          <el-select v-model="formInline.onShelf" filterable>
            <el-option label="是" value="1"></el-option>
            <el-option label="否" value="0"></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="上架状态：">
          <shelf-select v-model="formInline.onShelf"></shelf-select>
        </el-form-item> -->
        <el-form-item label="关键词：">
          <el-input
            v-model="formInline.term"
            placeholder="请输入关键词"
          ></el-input>
        </el-form-item>
      </el-form>
      <div class="search_btn_box">
        <el-button type="primary" size="small" @click="onSearch()"
          >筛选</el-button
        >
        <el-button type="default" size="small" @click="rest"
          >清空筛选</el-button
        >
      </div>
    </div>
    <!-- 搜索区域 end -->

    <!-- 表格 开始 -->
    <div class="table_box">
      <!-- 操作区域 开始 -->
      <div class="action_box">
        <el-button type="primary" size="small" @click="openDialog()"
          >新增广告</el-button
        >
      </div>
      <!-- 操作区域 end -->

      <el-table ref="elTable" class="el_table" size="small" :data="tableData">
        <el-table-column
          prop="advertisementName"
          label="广告位名称"
          show-overflow-tooltip
        />
        <el-table-column prop="position" label="广告位置" show-overflow-tooltip>
          <template slot-scope="{ row }">{{
            postionList[row.position]
          }}</template>
        </el-table-column>
        <el-table-column prop="createdDate" label="图片" show-overflow-tooltip>
          <template slot-scope="{ row }">
            <li-image :src="row.uploadMedia" class="tab_img" lazy-load />
          </template>
        </el-table-column>
        <el-table-column
          prop="jumpLink"
          label="跳转地址"
          show-overflow-tooltip
        />
        <el-table-column prop="onShelf" label="是否上架" show-overflow-tooltip>
          <template slot-scope="{ row }">{{
            row.onShelf == 1 ? "是" : "否"
          }}</template>
        </el-table-column>
        <el-table-column
          prop="orderTime"
          label="排序时间"
          show-overflow-tooltip
        />
        <el-table-column
          prop="createdDate"
          label="创建时间"
          show-overflow-tooltip
        />
        <el-table-column prop="creator" label="创建人" show-overflow-tooltip />
        <el-table-column prop="settleRegisterCnt" label="操作" width="120">
          <template slot-scope="{ row }">
            <el-link type="primary" class="el_link" @click="updateInfo(row)">{{
              row.onShelf == 1 ? "下架" : "上架"
            }}</el-link>
            <el-link
              type="primary"
              class="el_link"
              :underline="false"
              @click="openDialog('showDialog', row)"
              >编辑</el-link
            >
            <el-link
              type="danger"
              class="el_link"
              :underline="false"
              @click="remove(row)"
              >删除</el-link
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination_list">
        <el-pagination
          background
          layout="sizes, total,prev, pager, next, jumper"
          :total="pageTotal"
          :page-size="pageSize"
          :page-sizes="pageSizes"
          :current-page.sync="pageNumber"
          @current-change="getList"
          @size-change="changePageSize"
        />
      </div>
    </div>
    <!-- 表格 end -->

    <!-- 新增来源 开始 -->
    <glsx-dialog :show="showDialog" :title="dialogTitle" @close="closeDialog">
      <el-form
        :model="addForm"
        ref="addForm"
        class="add_form"
        :rules="addFormRules"
        size="small"
        label-width="120px"
      >
        <el-form-item label="广告位名称：" prop="advertisementName">
          <el-input
            v-model="addForm.advertisementName"
            class="a_input"
          ></el-input>
        </el-form-item>
        <el-form-item label="广告位置：" prop="position">
          <el-select class="a_select" v-model="addForm.position">
            <el-option label="web网站首页" value="1"></el-option>
            <el-option label="h5首页" value="2"></el-option>
            <el-option label="小程序首页" value="3"></el-option>
            <el-option label="web网站banner" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="上传图片：" prop="uploadMedia">
          <ImageUpload
            class="license_upload"
            v-model="addForm.uploadMedia"
            size="small"
          ></ImageUpload>
        </el-form-item>
        <el-form-item label="跳转地址：" prop="jumpLink">
          <el-input v-model="addForm.jumpLink" class="a_input"></el-input>
        </el-form-item>
        <el-form-item label="是否上架：" class="" prop="onShelf">
          <el-radio-group v-model="addForm.onShelf">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="排序时间：" prop="orderTime">
          <el-date-picker
            v-model="addForm.orderTime"
            type="date"
            class="a_input"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button
          type="primary"
          size="small"
          :loading="aloading"
          @click="saveInfo"
          >保存</el-button
        >
        <el-button type="default" size="small" @click="closeDialog()"
          >取消</el-button
        >
      </div>
    </glsx-dialog>
    <!-- 新增来源 end -->
  </div>
</template>
    
    <script>
import {
  BASEURL,
  GET_ADVERTISEMENT_SEARCH,
  DELETE_ADVERTISEMENT_INFO,
  STARTSTOP_ADVERTISEMENT_INFO,
  ADD_ADVERTISEMENT_INFO,
  EDIT_ADVERTISEMENT_INFO,
  GET_ADVERTISEMENT_INFO,
} from "@/http/system";
import { showToast, showModal, deepClone } from "@/common/util";
import ImageUpload from "@/components/upload/index.vue";
export default {
  components: {
    ImageUpload,
  },
  data() {
    return {
      formInline: {},
      tableData: [],
      pageTotal: 0,
      pageNumber: 1,
      pageSizes: [10, 20, 50, 100],
      pageSize: 20,
      showDialog: false,
      loading: false,
      addForm: {},
      addFormRules: {
        advertisementName: [
          { required: true, message: "请输入广告名称", trigger: "blur" },
        ],
        position: [
          { required: true, message: "请选择广告位置", trigger: "change" },
        ],
        uploadMedia: [
          { required: true, message: "请上传广告图片", trigger: "change" },
        ],
        onShelf: [
          { required: true, message: "请选择是否上架", trigger: "change" },
        ],
        orderTime: [
          { required: true, message: "请选择排序时间", trigger: "change" },
        ],
      },
      current: {},
      dialogTitle: "新增广告",
      aloading: false,
      postionList: {
        1: "web网站首页",
        2: "h5首页",
        3: "小程序首页",
        4: "web网站banner",
      },
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    /** 重置 */
    rest() {
      this.formInline = {};
      this.getList();
    },

    /** 每页展示 */
    changePageSize(e) {
      this.pageSize = e;
      this.getList();
    },

    /** 获取参数 */
    getParams() {
      let oParams = JSON.parse(JSON.stringify(this.formInline));
      let n = this.orderTime;

      if (n && n.length > 0) {
        oParams.sDate = n[0];
        oParams.eDate = n[1];
      }

      oParams.pageSize = this.pageSize;
      return oParams;
    },

    /** 获取列表 */
    getList(current) {
      let _this = this;
      let oParams = this.getParams();
      oParams.pageNumber = current || this.pageNumber;
      GET_ADVERTISEMENT_SEARCH(oParams).then((res) => {
        let obj = res.data || {};
        _this.tableData = obj.list || [];
        _this.pageTotal = obj.totalElements;
      });
    },

    // 打开弹框
    openDialog(id, row) {
      this[id || "showDialog"] = true;
      if (row) {
        this.dialogTitle = "编辑广告";
        this.current = row;
        this.getInfo(row);
      }
    },

    // 关闭弹框
    closeDialog(id) {
      let _this = this;
      this[id || "showDialog"] = false;
      this.dialogTitle = "新增广告";
      this.current = {};
      this.addForm = {};
      setTimeout(function () {
        _this.$refs.addForm.clearValidate();
      }, 100);
    },

    // 获取提交参数
    getAajaxParams() {
      let o = deepClone(this.addForm);
      let oParams = {};
      oParams.advertisementName = o.advertisementName;
      oParams.jumpLink = o.jumpLink;
      oParams.onShelf = o.onShelf;
      oParams.position = o.position;
      oParams.orderTime = o.orderTime;
      if (o.uploadMedia && o.uploadMedia.length) {
        let arr = [];
        o.uploadMedia.map((k) => {
          arr.push(k.path);
        });
        oParams.uploadMedia = arr;
      }
      if (o.id) {
        oParams.id = o.id;
      }
      return oParams;
    },

    // 新增来源
    saveInfo() {
      let _this = this;
      console.log(_this.$refs);
      _this.aloading = true;
      _this.$refs.addForm.validate((valid) => {
        if (!valid) {
          _this.aloading = false;
          return false;
        }

        let oParams = this.getAajaxParams();
        let callBack = ADD_ADVERTISEMENT_INFO;
        let msg = "新增成功";

        // 编辑
        if (oParams.id) {
          callBack = EDIT_ADVERTISEMENT_INFO;
          msg = "编辑成功";
        }
        callBack(oParams).then((res) => {
          _this.aloading = false;
          if (res.code == 200) {
            showToast({
              message: msg,
              type: "success",
            });
            _this.getList();
            _this.closeDialog();
          }
        });
      });
    },

    // 删除
    remove(row) {
      let _this = this;
      showModal({
        message: "确认删除该广告位吗？",
        showCancelButton: true,
        success: () => {
          DELETE_ADVERTISEMENT_INFO({ id: row.id }).then((res) => {
            if (res.code == 200) {
              showToast({
                message: "删除成功",
                type: "success",
              });
              _this.getList();
            }
          });
        },
      });
    },

    // 获取广告信息
    getInfo(row) {
      GET_ADVERTISEMENT_INFO({ id: row.id }).then((res) => {
        let obj = res.data || {};

        if (obj.uploadMedia && obj.uploadMedia.length) {
          let arr = [];
          obj.uploadMedia.map((k) => {
            arr.push({
              name: k,
              path: k,
              url: BASEURL + k,
            });
          });
          obj.uploadMedia = arr;
        }

        this.addForm = obj;
      });
    },

    // 上下架
    updateInfo(row) {
      let _this = this;
      showModal({
        message: `确认${row.onShelf == 1 ? "下架" : "上架"}该广告位吗？`,
        showCancelButton: true,
        type: "warning",
        success: function () {
          STARTSTOP_ADVERTISEMENT_INFO({ id: row.id }).then((res) => {
            if (res.code == 200) {
              showToast({
                message: "操作成功",
                type: "success",
              });
              _this.getList();
            }
          });
        },
      });
    },

    // 搜索
    onSearch(){
      this.pageNumber = 1;
      this.getList()
    }
  },
};
</script>
    
  <style lang="scss" scoped>
.a_input,
.a_select {
  width: 240px;
}
.add_form {
  display: flex;
  flex-wrap: wrap;
  .el-form-item {
    flex: 0 0 50%;
  }
}
.tab_img {
  width: 30px;
  height: 30px;
}
@import "@/assets/style/customer/index.scss";
</style>
    